import React,{Component}  from 'react';
import {connect} from 'react-redux';
import {fetchList,fetchCommenList,SubmitCommens} from '../actions/newsDetails'
import Moment from 'react-moment';

class NewsDetail extends Component{
    componentWillMount(){
        const params=this.props.routeParams.newsId;
        const id="articleId="+this.props.routeParams.newsId;
        this.props.fetchList(params);
        this.props.fetchCommenList(id);
    }
    
    render(){
        const {news,fetchList,commen,fetchCommenList,SubmitCommens} = this.props;
        const commens=commen.rows;
        var newsRender=[];
        var commensRender=[];
        var count;
        if(news._id){
            var imgPath="http://localhost:3000/"+news.img.filename;
            newsRender.push(
                <div key={news._id}>
                    <h3>{news.title}</h3>
                    <p className="time"><span className="left">编辑：{news.author}</span>时间：<Moment format="YYYY-MM-DD">{news.releaseTime}</Moment></p>
                    <p className="img"><img src={imgPath}/></p>
                    <p dangerouslySetInnerHTML={{__html: news.content}}></p>
                </div>
            )
        }
        if(commens){
            var len=commens.length;
            count=len;
            for(var i=0;i<len;i++){
                commensRender.push(
                    <div key={i} className="comment">
                        <span>昵称：{commens[i].appraiser}</span>
                        <span dangerouslySetInnerHTML={{__html: commens[i].content}}></span>  
                        <span>日期：<Moment format="YYYY-MM-DD">{commens[i].commentTime}</Moment></span>
                    </div>
                )
            }
        }
        var vm = this;
        function submitCommen(){
            const content=vm.refs.myConnent.value;
            const appraiser="default";
            const articleId=news._id;
            const params="content="+content+"&appraiser="+appraiser+"&articleId="+articleId;
            const id="articleId="+news._id;
            vm.props.SubmitCommens(params);
            vm.props.fetchCommenList(id);
        }
        return(
            <div id="newsDetails">
                {newsRender}
                <div className="addCommen">
                    <h4>评论:</h4>
                    <div className="write">
                        <textarea rows="4" cols="20" ref="myConnent"></textarea>
                    </div>
                    <div className="addBtn">
                        <button type="button" className="btn btn-default" onClick={submitCommen}><span className="glyphicon glyphicon-pencil"></span>评论</button>
                    </div>
                </div>
                <div>
                    <h4>最新评论:{count}条</h4>
                    {commensRender}
                </div>
                
            </div>
        )
    }
}
const getValue = (state)=>{
    return {
        news: state.newsDetails.news,
        commen:state.newsDetails.commen
    }
}
const NewsDetails = connect(getValue,{fetchList,fetchCommenList,SubmitCommens})(NewsDetail)
module.exports = NewsDetails;